<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                //心跳保活
                function heartBeat(){
                    $.ajax({
                        url: "https://MZYMASTER/S/api/heartbeat",
                        headers: {
                            'Access-Control-Allow-Origin' : '*',
                            'Authorization': 'bearer ' +  $('#tokenStore').val()
                        },
                        xhrFields: 'Access-Control-Allow-Origin : *',
                        type: "POST"
                    });
                }
                $("#submit").click(function(){
                    let url = $("#url").val();
                    let userName = $("#userName").val();
                    let password = $("#password").val();
                    let clientId = $("#clientId").val();
                    $.ajax({
                        url: url,
                        data: {
                            'grant_type': "password",
                            'username': userName,
                            'password': password,
                            'client_id': clientId
                        },
                        type: "POST",
                        dataType: "json",
                        success: function(data){
                            if(data){
                                console.log(data.access_token);
                                $("#tokenStore").val(data.access_token);
                                $("#tokenCtn").hide();
                                $("#dataCtn").show();
                                setInterval(() => {
                                    heartBeat();
                                }, 30 * 1000);
                            }
                        },
                        fail: function(data){
                            alert(data);
                        }
                    });
                });
                $("#sub").click(function(){
                    let url = $("#qUrl").val();
                    let selected = $("#methodSel option:selected").val();
                    let data = {};
                    $.ajax({
                        url: url,
                        data: data,
                        type: selected,
                        dataType: "json",
                        headers: {
                            'Access-Control-Allow-Origin' : '*',
                            'Authorization': 'bearer ' +  $('#tokenStore').val()
                        },
                        success: function(data){
                            $('#dataShow').text(JSON.stringify(data));
                        },
                        fail: function(data){
                            alert(data);
                        }
                    });
                });
                $("#addQP").click(function(){
                    let kv = "<br /><input type='text' placeholder='输入key' /><input type='text' placeholder='输入value' />";
                    $("#kvCtn").append(kv);
                });
            });
        </script>
    </head>
    <body>
        <div id="tokenCtn">
            <input type="text" value="https://MZYMASTER:443/S/api/token" id="url" placeholder="输入url" style="width: 400px;;"/>
            <input type="text" id="userName" placeholder="输入用户名"/>
            <input type="password" id="password" placeholder="输入密码" />
            <input type="hidden" id="tokenStore" />
            <input type="button" value="submit" id="submit"/>
        </div>
        <div id="dataCtn" style="display: none;">
            <select id="methodSel">
                <option value="GET">GET</option>
                <!-- <option value="POST">POST</option> -->
                <!-- <option value="OPTIONS">OPTIONS</option>
                <option value="PUT">PUT</option>
                <option value="DELET">DELET</option> -->
            </select>
            <input type="text" value="" id="qUrl" placeholder="输入url" style="width: 400px;;"/>
            <input type="button" value="submit" style="cursor: pointer;" id="sub"/>
            <div id="qpCtn" style="display: none;">
                <input type="button" id="addQP" value="添加参数" />
                <div id="kvCtn" style="display: inline-block;">
                    <input type="text" id="key" placeholder="输入key" />
                    <input type="text" id="value" placeholder="输入value" />
                </div>
            </div>
            <pre id="dataShow"></pre>
        </div>
    </body>
</html>